<h1><code ng:non-bindable="">ngIf</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngIf.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngIf</code> directive removes and recreates a portion of the DOM tree (HTML)
conditionally based on <strong>"falsy"</strong> and <strong>"truthy"</strong> values, respectively, evaluated within
an {expression}. In other words, if the expression assigned to <strong>ngIf evaluates to a false
value</strong> then <strong>the element is removed from the DOM</strong> and <strong>if true</strong> then <strong>a clone of the
element is reinserted into the DOM</strong>.</p>

<p><code>ngIf</code> differs from <code>ngShow</code> and <code>ngHide</code> in that <code>ngIf</code> completely removes and recreates the
element in the DOM rather than changing its visibility via the <code>display</code> css property.  A common
case when this difference is significant is when using css selectors that rely on an element's
position within the DOM (HTML), such as the <code>:first-child</code> or <code>:last-child</code> pseudo-classes.</p>

<p>Note that <strong>when an element is removed using ngIf its scope is destroyed</strong> and <strong>a new scope
is created when the element is restored</strong>.  The scope created within <code>ngIf</code> inherits from 
its parent scope using
<a href="https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance">prototypal inheritance</a>.
An important implication of this is if <code>ngModel</code> is used within <code>ngIf</code> to bind to
a javascript primitive defined in the parent scope. In this case any modifications made to the
variable within the child scope will override (hide) the value in the parent scope.</p>

<p>Also, <code>ngIf</code> recreates elements using their compiled state. An example scenario of this behavior
is if an element's class attribute is directly modified after it's compiled, using something like 
jQuery's <code>.addClass()</code> method, and the element is later removed. When <code>ngIf</code> recreates the element
the added class will be lost because the original compiled state is used to regenerate the element.</p>

<p>Additionally, you can provide animations via the ngAnimate attribute to animate the <strong>enter</strong>
and <strong>leave</strong> effects.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-if="{expression}"&gt;
   ...
&lt;/ANY&gt;</pre>
with <span id="animations">animations</span><pre class="prettyprint linenums">//The enter and leave animations are supported
&lt;ANY ng-if="{expression}" ng-animate="{enter: 'enter-animation', leave: 'leave-animation'}"&gt;
   ...
&lt;/ANY&gt;</pre>
<a href="api/ng.$animator#Methods">Click here</a> to learn more about the steps involved in the animation.<h3 id="Directive.info">Directive info</h3>
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngIf</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><p>If the <a href="guide/expression">expression</a> is falsy then
the element is removed from the DOM tree (HTML).</p></td></tr></tbody></table><h3 id="Animations">Animations</h3>
<div class="animations"><ul><li>enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container</li><li>leave - happens just before the ngIf contents are removed from the DOM</li></ul></div>
</div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-164" source-edit-css="animations.css" source-edit-js="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-164" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-164">
  Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
  Show when checked:
  <span ng-if="checked" ng-animate="'example'">
    I'm removed when the checkbox is unchecked.
  </span>
</script>
</div>
<div class="tab-pane" title="animations.css">
<pre class="prettyprint linenums" ng-set-text="animations.css"></pre>
<style type="text/css" id="animations.css">
  .example-leave, .example-enter {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  }

  .example-enter {
    opacity:0;
  }
  .example-enter.example-enter-active {
    opacity:1;
  }

  .example-leave {
    opacity:1;
  }
  .example-leave.example-leave-active {
    opacity:0;
  }
</style>
</div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h2>Demo</h4>
<div class="well doc-example-live animator-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-164" ng-eval-javascript=""></div></div>
</div>
